<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/plugins/jQuery/jquery-ui-1.10.4.css}" />
<link rel="stylesheet" type="text/css" media="all" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/mobile/common.css}" />
	
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=ESUICaohNGpKKOAx3d2SOzDxuZ2WUMlX&amp;services=&amp;t=20180323171755"></script>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script th:src="@{/plugins/jQuery/navbar/jquery-mobile-navbar.js}"></script>
<script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>

<link rel="stylesheet" type="text/css" media="all" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/mobile/common.css}" />
<link rel="stylesheet" th:href="@{/mobile/reset.css}" />
<style>

</style>
</head>
<body>
	<div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<span class="fa fa-angle-left goBackMailList" th:if="${back} ne ''"></span>
			<h1>通讯录</h1>
		</div>
		<div data-role="main">
			<input type="hidden" id="hierarchy" th:value="${hierarchy}"/>
			<input type="hidden" id="back" th:value="${back}"/>
			<input type="hidden" id="roleName" th:value="${session.account.role.name}"/>
			<div style="filter: alpha(Opacity = 80); -moz-opacity: 0.5; opacity: 0.5; padding-right: 0em; padding-left: 0em">
				<input width="100%" type="search" id="searchMain" style="border-radius: 10px;"
					placeholder="搜索内容..." />
			</div>
			<div id="mailList">
				<div class="tab" role="tabpanel">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#hierarchys" data-toggle="tab">组织</a></li>
						<li><a href="#users" data-toggle="tab">人员</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane fade in active" id="hierarchys">
							<ul data-role="listview" id="hierarchyList"></ul>
						</div>
						<div class="tab-pane fade" id="users">
							<ul data-role="listview" id="userList">用户信息</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="BgDiv"></div>
		<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
			<div id="menu-bar" class="menu-bar">
			</div>
			<div class="flyout-wrap">
    				<a class="flyout-btn" href="#" title="Toggle"><span><img src="/wcsi/img/plus.svg"/></span></a>
				<ul class="flyout"></ul>
  			</div>
		</div>	
	</div>
	

	<div data-role="page" id="userPage"
		style='background-color: #F5F5F5; background-size: cover;'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>人员信息</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview">
				<li style="height: 60px !important;">
					<div class="row">
						<div class="col-xs-6 settingsUserPicTitle"><span>头像</span></div>
						<div class="col-xs-6 ">
							<a href="#userPicPage" data-transition="slide"><div><img id="UserPic" src="" class="img-responsive img-circle settingsUserPic"/></div></a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>姓名</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="name"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>性别</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="sex"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>电话</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="contactType"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>邮箱</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="email"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>备注</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="memo"></div>
						</div>
					</div>
				</li>
			</ul>
        				
		</div>
	</div>
	<div data-role="page" id="hierarchyPage"
		style='background-color: #F5F5F5; background-size: cover;'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>组织信息</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview">
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>组织名称 </span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="groupName"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>组织电话</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="groupTelphone"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>备注</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="memo"></div>
						</div>
					</div>
				</li>
			</ul>
        				
		</div>
	</div>
	
	<div data-role="page" id="searchPage">
		<div data-role="main">
			<div>
				<div style="width:85%;filter: alpha(Opacity = 80); -moz-opacity: 0.5; opacity: 0.5; padding-right: 0em; padding-left: 0em;float: left">
					<input type="text" id="search" style="border-radius: 10px;" placeholder="搜索内容..." />
				</div>
				<div style="position: absolute;left:calc(85% - 16px - 0.7em);top:0;margin-top: 0.5em;margin-left: 0.5em;">
					<img id="searchBtn" src="/wcsi/img/searchIcon.png" style="width: 17px;height: 17px;margin-top: 2px;"/>
				</div>
				<div style="float: left;margin-top: 0.5em;margin-left: 0.5em;">
					<div style="margin-top: 2px;">
						<a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" style="margin-top: 2px;"><span>取消</span></a>
					</div>
				</div>
			</div>
 			<div id="mailList2">
				<div class="tab" role="tabpanel">
					<ul class="nav nav-tabs2">
<!-- 						<li class="active"><a href="#hierarchys2" data-toggle="tab">组织</a></li> -->
						<li class="active"><a href="#users2" data-toggle="tab">人员</a></li>
					</ul>
					<div class="tab-content">
						<!-- <div class="tab-pane fade in active" id="hierarchys2">
							<ul data-role="listview" id="hierarchyList2"></ul>
						</div> -->
						<div class="tab-pane fade in active" id="users2">
							<ul data-role="listview" id="userList2"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div data-role="page" id="userPage2"
		style='background-color: #F5F5F5; background-size: cover;'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#searchPage" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>人员信息</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview">
				<li style="height: 60px !important;">
					<div class="row">
						<div class="col-xs-6 settingsUserPicTitle"><span>头像</span></div>
						<div class="col-xs-6 ">
							<a href="#userPicPage" data-transition="slide"><div><img id="UserPic2" src="" class="img-responsive img-circle settingsUserPic"/></div></a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>姓名</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="name2"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>性别</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="sex2"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>电话</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="contactType2"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>邮箱</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="email2"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>备注</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="memo2"></div>
						</div>
					</div>
				</li>
			</ul>
        				
		</div>
	</div>
	
	<link rel="stylesheet" th:href="@{/mobile/mailList/mailListIndex.css}" />
	<script th:src="@{/mobile/common.js}"></script>
	<script th:src="@{/plugins/jQuery/jquery.raty.js}"></script>
	<script th:src="@{/plugins/jQuery/jquery.rotate.min.js}"></script>
	<script th:src="@{/mobile/mailList/mailListIndex.js}"></script>
	<script th:src="@{/plugins/jQuery/moment/moment.min.js}"></script>
	<script th:src="@{/js/ajaxfileupload/ajaxfileupload.js}"></script>
	<script th:inline="javascript">
		window.rootPath= /*[[${#httpServletRequest.getContextPath()}]]*/
	</script>
</body>
</html>